import ArkScroll from "../ark-scroll/ArkScroll.vue";
import {ArkScrollOptions} from "../ark-scroll/ArkScrollOptions";

export default {
  title: 'ark-component-v2/ArkScroll',
  component: ArkScroll,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue3、tailwindcss、lodash、scss、overlayscrollbars</span> 使用`
      }
    }
  },
  argTypes: {
    options: {description: 'ArkScrollOptions'},
    default: {description: '滚动容器内容部分'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args: ArkScrollOptions) => ({
    components: {ArkScroll},
    setup() {
      return {args};
    },
    template: `
      <ArkScroll v-bind="args" style="height: 150px">
        <div
          v-for="(item,index) in 10" :key="index"
          style="margin: 10px;padding: 10px;background-color: pink"
        >
          {{ item }}
        </div>
      </ArkScroll>`,
  }),
  args: {}
};